博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序的开发
阅读量:4578 次
发布时间:2019-06-08

本文共 3055 字,大约阅读时间需要 10 分钟。

现在一直看到有关于微信小程序的问题,我也来看看这个是怎么弄的 我是以个人的身份开注册是微信小程序

1.点击微信公众平台里面的注册,就会看到有四个账号类型,点击小程序,然后看到这个页面

填写完整自己的信息,就注册完成了!

注意:在填写小程序名字的时候要想好,因为这个名字在发布之后,就不能更改了

2,登录微信小程序

在首页看到的是这个页面,然后看流程那儿,很清楚的说明了之后应该执行哪几步

流程走完之后,就进入了开发阶段,我们可以看一下官方的文档(https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2017712),这里面包括了大部分的组件 框架 api等,基本满足我们的需求。现在介绍几个构成一个页面:

就只是写了一个页面

1.轮播图

html
jsPage({ data: { imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: false, autoplay: false, interval: 5000, duration: 1000, hasLocation: false }, changeIndicatorDots: function (e) { this.setData({ indicatorDots: !this.data.indicatorDots }) }, changeAutoplay: function (e) { this.setData({ autoplay: !this.data.autoplay }) }, intervalChange: function (e) { this.setData({ interval: e.detail.value }) }, durationChange: function (e) { this.setData({ duration: e.detail.value }) },});cssimage{width:100%}

2.分类

html
美食
甜点
工作餐
夜宵
css.sort .flex-item { width:25%; height:60px; line-height:60px; text-align:center; float:left; background:#e9f0fa}.sort .active{ background:#dfe5ef}

 3.获取当前位置

htmljs//获取经纬度  getLocation: function (e) {    console.log(e)    var that = this    wx.getLocation({      type: 'gcj02', //返回可以用于wx.openLocation的经纬度      success: function (res) {        var latitude = res.latitude        var longitude = res.longitude        wx.openLocation({          latitude: latitude,          longitude: longitude,          scale: 28        })      }    })  },

官方文档写的还是很清楚的

3.页面之间的跳转,要设置一下路由,在写之前要先看清楚官方的文档

从index跳转到detail并且获取到从index传给detail的参数 这里面用的navigator并且渲染的时候用的是一个类似于vuejs中的v-for指令,然后再datail中用onLoad函数中的options获取到传递的参数

在index中

html
jspage中的data中 listImage:[ {mark:'one',src:'././image/1.jpeg'}, { mark: 'two',src: '././image/2.jpeg'}, { mark: 'three', src: '././image/3.png' }, { mark: 'four',src: '././image/4.png' }, { mark: 'five', src: '././image/5.jpeg' }, { mark: 'six', src: '././image/6.png' }, ] },

在app.json中

{  "pages":[    "pages/index/index",    "pages/logs/logs",    "pages/concat/index",    "pages/index/detail/index"  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "WeChat",    "navigationBarTextStyle":"black"  }}

在detail中

html
{
{mark}}
jsPage({ data: { mark:0 }, onLoad:function(options){ this.setData({ mark: options.mark }) }})

  

 

转载于:https://www.cnblogs.com/GainLoss/p/7201586.html

你可能感兴趣的文章
自己编写类似于枚举的类型(多例模式)
查看>>
Asp: Server.mapPath() 注意事项
查看>>
关于减少BUG的思考
查看>>
Response.AddHeader("Content-Disposition", "attachment; filename=" + file.Name) 中文显示乱码
查看>>
第二章随笔
查看>>
string.Format出现异常"输入的字符串格式有误"的解决方法
查看>>
SSL 1010——方格取数
查看>>
关于同余与模运算的总结
查看>>
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
查看>>
【转载】法线贴图Nomal mapping 原理
查看>>
prado 初步分析
查看>>
php 做守护进程1
查看>>
简单员工管理实例
查看>>
textwrap 模块
查看>>
SAP 到出XLS
查看>>
HSV
查看>>
JAVA程序中SQL语句无法传递中文参数
查看>>
Android学习_数据库查询使用rawQuery遇到的问题
查看>>
|待研究|委托付款的支付状态触发器
查看>>
redis集群中的主从复制架构(3主3从)
查看>>